<template>
   <div
      class="header-fixed"
      v-show="showTitle"
      :style="opacityStyle"
    >
      <router-link to="/">
        <div class="iconfont icon-back header-fixed-back"></div>
      </router-link>
      景点详情
    </div>
</template>

<script scoped>
const dis = 140
export default {
  name: 'DetailFixedHeader',
  props: ['posY'],
  data () {
    return {
      showTitle: false,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  watch: {
    posY () {
      if (-this.posY && -this.posY > 60) {
        console.log(-this.posY)
        let opacity = -this.posY / dis
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
        this.showTitle = true
      } else {
        this.showTitle = false
      }
    }
  },
  components: {}
}
</script>

<style lang='less' scoped>
.header-fixed{
    height: @headerHeight;
    line-height: @headerHeight;
    text-align: center;
    color: #fff;
    background: #64D7F7;
    font-size: .32rem;
    .header-fixed-back{
      position: absolute;;
      top: 0;
      left: 0;
      width: .64rem;
      text-align: center;
      font-size: .4rem;
      color: #fff;
    }
}
</style>
